<template>
  <div class="main-login">
    <div class="main-login-form">
      <img src="http://www.lihynotes.cn:81/songs/h.jpg">
      <n-tabs
        class="card-tabs"
        default-value="signin"
        size="large"
        animated
        pane-wrapper-style="margin: 0 -4px"
        pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
      >
        <n-tab-pane name="signin" tab="登录">
          <n-form ref="loginFormRef" :model="loginModel" :rules="loginRules">
            <n-form-item path="userName" label="用户名">
              <n-input v-model:value="loginModel.userName" placeholder="输入用户名或邮箱" />
            </n-form-item>
            <n-form-item path="passWord" label="密码">
              <n-input type="password" v-model:value="loginModel.passWord" placeholder="输入密码"/>
            </n-form-item>
          </n-form>
          <n-button
            type="primary"
            block 
            @click="Login">
            登录
          </n-button>
        </n-tab-pane>
        <n-tab-pane name="signup" tab="注册">
          <n-form ref="regFormRef" :model="regModel" :rules="reginRules">
            <n-form-item path="userName" label="用户名">
              <n-input v-model:value="regModel.userName" placeholder="输入用户名或邮箱"/>
            </n-form-item>
            <n-form-item path="passWord" label="密码">
              <n-input type="password" v-model:value="regModel.passWord" placeholder="输入密码"/>
            </n-form-item>
          </n-form>
          <n-button 
            type="primary" 
            block
            @click="registers">
            注册
          </n-button>
        </n-tab-pane>
      </n-tabs>
      <div class="main-login-form--home">
        <NuxtLink to="/">游客访问，进入首页</NuxtLink>
      </div>
    </div>
    <div class="main-login-text">
      <p>If we can only encounter each other rather than stay with each other,then I wish we had never encountered.</p>
      <p>如果只是遇见，不能停留，不如不遇见。</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useNotification } from "naive-ui"
import { login,register } from "../../service/api/Blogger"
const notification = useNotification()
//登录注册
const loginFormRef = ref(null)
const loginModel = reactive({
  userName: null,
  passWord: null
})
const loginRules = reactive({ 
  userName:[
    {
      required: true,
      message: '请输入用户名'
    }
  ],
  passWord:[
    {
      required: true,
      validator (rule:any, value: string) {
        if (!value) {
          return new Error('请输入密码')
        } else if (!/^[A-Za-z0-9]+$/.test(value)) {
          return new Error('密码必须数字和字母组合')
        } else if(value.length > 11){
          return new Error('密码不超过11位')
        }
        return true
      },
      trigger: ['input', 'blur']
    }
  ]
})
const regFormRef = ref(null)
const regModel = reactive({
  userName: null,
  passWord: null
})
const reginRules = reactive({
  userName:[
    {
      required: true,
      message: '请输入用户名'
    }
  ],
  passWord:[
    {
      required: true,
      validator (rule: any, value: string) {
        if (!value) {
          return new Error('请输入密码')
        } else if (!/^[A-Za-z0-9]+$/.test(value)) {
          return new Error('密码必须数字和字母组合')
        } else if(value.length > 11){
          return new Error('密码不超过11位')
        }
        return true
      },
      trigger: ['input', 'blur']
    }
  ]
})
const Login = async (e:any)=>{
  e.preventDefault()
 loginFormRef.value?.validate(errors => {
    if (!errors) {
      // await nextTick()
      try {
        login(loginModel).then(res => {
          console.log(res.data._rawValue)
          let data = res.data._rawValue
          if(data.code == 200){
            notification['success']({
              content: '通知',
              meta: '登陆成功',
              duration: 2500,
              keepAliveOnHover: true
            })
            localStorage.setItem('userInfo',JSON.stringify(data.data.dataValues))
            navigateTo({path:'/'})
          } else {
            notification['error']({
              content: '通知',
              meta: data.message,
              duration: 2500,
              keepAliveOnHover: true
            })
          }
        })
      } catch(err) {
        notification['success']({
          content: '通知',
          meta: err,
          duration: 2500,
          keepAliveOnHover: true
        })
      } 
    } else {
      notification['error']({
        content: '通知',
        meta: '验证失败',
        duration: 2500,
        keepAliveOnHover: true
      })
    }
  })
}
const registers = (e) => {
  e.preventDefault()
  regFormRef.value?.validate((errors) => {
    if (!errors) {
      register(regModel).then(res => {
        let data = res.data._rawValue
        if(data.code == 200){
          notification['success']({
            content: '通知',
            meta: data.message,
            duration: 2500,
            keepAliveOnHover: true
          })
        } else {
          notification['error']({
            content: '通知',
            meta: data.message,
            duration: 2500,
            keepAliveOnHover: true
          })
        }
      })
    } else {
      notification['error']({
        content: '通知',
        meta: '验证失败',
        duration: 2500,
        keepAliveOnHover: true
      })
    }
  })
}
</script>
<style scoped lang="scss">
.main-login{
  background: url('../../assets/images/2.jpg') no-repeat;
  width: 100%;
  height: 100vh;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  &-form{
    width: 20%;
    height: auto;
    background: rgba($color: #fff, $alpha: .3);
    padding: 60px;
    border-radius: 5px;
    position: relative;
    img{
      width: 100px;
      height: 100px;
      border-radius: 50px;
      position: absolute;
      top: -60px;
      left: 39%;
    }
    &--home{
      font-size: 18px;
      text-align: center;
      color: #fff;
      margin-top: 30Px;
      cursor: pointer;
    }
    &--home:hover{
      color: #18a058 !important;
    }
    .n-input{
      background: transparent !important;
    }
    .n-input:not(.n-input--textarea) .n-input__placeholder {
      color: #18a058 !important;
    }
  }
  &-text{
    color: #fff;
    text-align: center;
    p{
      margin-top: 20px;
      font-size: 18px;
    }
  }
}
</style>